Conversation
- Remove project-setup.md (template-specific, not needed in derived projects) - Move quick_notes.md up from own/ subdirectory Simplifies documentation hierarchy for projects created from this template.
Claude Commands: - Add /merge-cleanup slash command for post-PR branch housekeeping - Include x_docs/**/*.md in docs prefix examples The merge-cleanup command automates the repetitive workflow after merging a PR: switching to main, pulling, deleting the merged branch, and pruning remotes. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Reference Files: - Add globals-old.css showing Tailwind v3 utility class patterns - Add globals-compare.md documenting differences between old and modern approaches - Exclude old CSS from Biome linting (intentionally contains legacy patterns) Documents the contrast between composite utility classes and modern CSS variable patterns for Tailwind v4 theming. Useful for understanding migration paths. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Replace favicon with smaller version (26KB → 15KB) - Add favicon copy to public directory - Remove unused social-card.jpg 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Fonts: - Replace Lora (serif) with Inter (sans-serif) for body text - Replace Montserrat with Space Grotesk for headings/display - Update fallback stacks to modern system font keywords Configuration: - Rename --font-serif to --font-sans-serif to reflect actual font type - Update layout.tsx font variables and metadata title Aligns typography with course design system. Inter provides cleaner sans-serif body text while Space Grotesk adds character to headings. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Layout: - Remove constraining wrapper div, allow pages to control their own layout - Remove min-h-screen and bg-background from body Home Page: - Replace template content with minimal placeholder Prepares the layout for course-aligned page styling where each page controls its own structure. The template showcase content is no longer needed. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Summary by CodeRabbitRelease Notes
✏️ Tip: You can customize this high-level summary in your review settings. WalkthroughThis PR comprehensively updates the application's typography system, CSS styling, branding, and supporting documentation. It replaces fonts (Montserrat and Lora with Inter and Space_Grotesk), updates global CSS variables to reflect the new typography stack, simplifies the home page component, updates application metadata from "Create Next App" to "Devflow", and adds configuration and documentation files whilst removing setup documentation. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (3)
app/favicon.icois excluded by!**/*.icopublic/favicon.icois excluded by!**/*.icopublic/social-card.jpgis excluded by!**/*.jpg
📒 Files selected for processing (12)
.claude/commands/commit.md(1 hunks).claude/commands/merge-cleanup.md(1 hunks).claude/settings.json(1 hunks)app/fonts.ts(1 hunks)app/globals-old.css(1 hunks)app/globals.css(2 hunks)app/layout.tsx(2 hunks)app/page.tsx(1 hunks)biome.json(1 hunks)e2e/homepage.spec.ts(1 hunks)x_docs/own/globals-compare.md(1 hunks)x_docs/project-setup.md(0 hunks)
💤 Files with no reviewable changes (1)
- x_docs/project-setup.md
🧰 Additional context used
📓 Path-based instructions (7)
**/*.{ts,tsx,js,jsx,md}
📄 CodeRabbit inference engine (CLAUDE.md)
Use British English spelling and conventions throughout the project
Files:
e2e/homepage.spec.tsapp/layout.tsxx_docs/own/globals-compare.mdapp/fonts.tsapp/page.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Avoid manual useMemo/useCallback unless profiling shows need
Files:
e2e/homepage.spec.tsapp/layout.tsxapp/fonts.tsapp/page.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Always use @/ import aliases, even for sibling imports (e.g., @/app/fonts instead of ./fonts)
Files:
e2e/homepage.spec.tsapp/layout.tsxapp/fonts.tsapp/page.tsx
app/**
📄 CodeRabbit inference engine (CLAUDE.md)
Use Next.js 16 App Router (not Pages Router) for routing
Files:
app/globals-old.cssapp/layout.tsxapp/globals.cssapp/fonts.tsapp/page.tsx
**/*.{css,postcss}
📄 CodeRabbit inference engine (CLAUDE.md)
Use Tailwind v4 @import syntax (@import "tailwindcss") instead of @tailwind directives
Files:
app/globals-old.cssapp/globals.css
app/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Only add "use client" directive when interactivity is needed
Files:
app/layout.tsxapp/fonts.tsapp/page.tsx
app/**/page.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Dynamic route params is a Promise and must be awaited in page components
Files:
app/page.tsx
🧠 Learnings (3)
📚 Learning: 2025-12-01T13:45:33.921Z
Learnt from: CR
Repo: michellepace/devflow PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-01T13:45:33.921Z
Learning: Applies to **/*.{css,postcss} : Use Tailwind v4 import syntax (import "tailwindcss") instead of tailwind directives
Applied to files:
app/globals-old.cssapp/layout.tsxx_docs/own/globals-compare.md
📚 Learning: 2025-12-01T13:45:33.921Z
Learnt from: CR
Repo: michellepace/devflow PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-01T13:45:33.921Z
Learning: Applies to **/*.{ts,tsx,js,jsx} : Always use @/ import aliases, even for sibling imports (e.g., @/app/fonts instead of ./fonts)
Applied to files:
app/layout.tsx
📚 Learning: 2025-12-01T13:45:33.921Z
Learnt from: CR
Repo: michellepace/devflow PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-01T13:45:33.921Z
Learning: Applies to app/** : Use Next.js 16 App Router (not Pages Router) for routing
Applied to files:
app/layout.tsx
🪛 LanguageTool
.claude/commands/merge-cleanup.md
[formatting] ~7-~7: These punctuation marks differ from each other. Use only one if you are ending a sentence.
Context: ... prune --- ## Context - Current branch: !git branch --show-current - All local ...
(DOUBLE_PUNCTUATION_PREMIUM)
[formatting] ~8-~8: These punctuation marks differ from each other. Use only one if you are ending a sentence.
Context: ...nch --show-current - All local branches: !git branch - Remote branches: !git br...
(DOUBLE_PUNCTUATION_PREMIUM)
[formatting] ~9-~9: These punctuation marks differ from each other. Use only one if you are ending a sentence.
Context: ...ranches: !git branch - Remote branches: !git branch -r ## Task Michelle has m...
(DOUBLE_PUNCTUATION_PREMIUM)
x_docs/own/globals-compare.md
[style] ~3-~3: Would you like to use the Oxford spelling “categorizes”? The spelling ‘categorises’ is also correct.
Context: ...ilwind v4 approach (globals.css), and categorises all configuration patterns with explana...
(OXFORD_SPELLING_Z_NOT_S)
[style] ~51-~51: Would you like to use the Oxford spelling “Centralizing”? The spelling ‘Centralising’ is also correct.
Context: ...ut the application. Why it exists: Centralising design tokens like border radius allows...
(OXFORD_SPELLING_Z_NOT_S)
[style] ~58-~58: Would you like to use the Oxford spelling “optimization”? The spelling ‘optimisation’ is also correct.
Context: ...mono`) that integrate with Next.js font optimisation --- ### 2. Background Theme Utilities...
(OXFORD_SPELLING_Z_NOT_S)
[style] ~118-~118: To elevate your writing, try using a synonym here.
Context: ...ttles - Arbitrary colour values make it hard to understand visual hierarchy - No ind...
(HARD_TO)
[uncategorized] ~266-~266: Loose punctuation mark.
Context: ...`` What it does: - invert-colors: Inverts an element's colours in light m...
(UNLIKELY_OPENING_PUNCTUATION)
[uncategorized] ~327-~327: Loose punctuation mark.
Context: ... What it does: - primary-gradient: Brand gradient for buttons, CTAs, highl...
(UNLIKELY_OPENING_PUNCTUATION)
[uncategorized] ~375-~375: Loose punctuation mark.
Context: ...ommon flexbox patterns: - flex-center: Centre children both horizontally and v...
(UNLIKELY_OPENING_PUNCTUATION)
[style] ~493-~493: Would you like to use the Oxford spelling “Customizes”? The spelling ‘Customises’ is also correct.
Context: ...ext-light-700; } ``` What it does: Customises the Tailwind Typography plugin (`@tailw...
(OXFORD_SPELLING_Z_NOT_S)
[style] ~502-~502: Would you like to use the Oxford spelling “customized”? The spelling ‘customised’ is also correct.
Context: ...install @tailwindcss/typography` 2. Add customised prose utilities: ```css @layer utiliti...
(OXFORD_SPELLING_Z_NOT_S)
[style] ~519-~519: Would you like to use the Oxford spelling “Customization”? The spelling ‘Customisation’ is also correct.
Context: ... automatically. --- ### 13. Scrollbar Customisation ```css .custom-scrollbar::-webkit-scro...
(OXFORD_SPELLING_Z_NOT_S)
[uncategorized] ~553-~553: Loose punctuation mark.
Context: ... What it does: - custom-scrollbar: Thin, styled scrollbar for webkit brows...
(UNLIKELY_OPENING_PUNCTUATION)
[uncategorized] ~557-~557: Although a hyphen is possible, it is not necessary in a compound modifier in which the first word is an adverb that ends in ‘ly’.
Context: ...UI, especially in sidebars, modals, and horizontally-scrolling containers. Browser support note: ...
(HYPHENATED_LY_ADVERB_ADJECTIVE)
[uncategorized] ~616-~616: Loose punctuation mark.
Context: ...``` What it does: - active-theme: Applies a colour filter to indicate act...
(UNLIKELY_OPENING_PUNCTUATION)
[uncategorized] ~621-~621: Loose punctuation mark.
Context: ...ht Why it exists: - active-theme: Colouring icons/elements to match brand...
(UNLIKELY_OPENING_PUNCTUATION)
[style] ~754-~754: Would you like to use the Oxford spelling “centralized”? The spelling ‘centralised’ is also correct.
Context: ...bals.css` is unequivocally superior for centralised theming with Tailwind v4. Here's an edu...
(OXFORD_SPELLING_Z_NOT_S)
[style] ~922-~922: Would you like to use the Oxford spelling “Centralization”? The spelling ‘Centralisation’ is also correct.
Context: ...ith OKLCH lightness than HSL. --- ### Centralisation Score Let's quantify "centralisation" ...
(OXFORD_SPELLING_Z_NOT_S)
[style] ~924-~924: Would you like to use the Oxford spelling “centralization”? The spelling ‘centralisation’ is also correct.
Context: ...# Centralisation Score Let's quantify "centralisation" — how many places must change to updat...
(OXFORD_SPELLING_Z_NOT_S)
[style] ~934-~934: Would you like to use the Oxford spelling “centralization”? The spelling ‘centralisation’ is also correct.
Context: ...hange --border variable | Old file centralisation score: 2/10 **Modern file centralisat...
(OXFORD_SPELLING_Z_NOT_S)
[style] ~935-~935: Would you like to use the Oxford spelling “centralization”? The spelling ‘centralisation’ is also correct.
Context: ...tralisation score: 2/10** Modern file centralisation score: 9/10 --- ### Runtime Theme S...
(OXFORD_SPELLING_Z_NOT_S)
[uncategorized] ~977-~977: Although a hyphen is possible, it is not necessary in a compound modifier in which the first word is an adverb that ends in ‘ly’.
Context: ...e utilities layer, resulting in: - 50+ tightly-coupled utility classes - No single source of t...
(HYPHENATED_LY_ADVERB_ADJECTIVE)
🔇 Additional comments (9)
app/fonts.ts (1)
1-22: Variable font configuration looks consistentImports and exported font configurations align with Next.js font usage and the new typography tokens. Nothing to change here.
biome.json (1)
17-19: Biome includes align with new docs and legacy CSSIncluding
x_docs/referenceandapp/globals-old.cssin Biome’s include list matches the new documentation and theming-comparison files. Looks good..claude/settings.json (1)
9-21: Playwright evaluation permission addition is consistentAdding
mcp__playwright__browser_evaluatesits naturally with the existing Playwright permissions. Just ensure this extra capability is actually required, to keep to least-privilege where possible..claude/commands/commit.md (1)
47-47: Docs prefix now correctly covers x_docsExtending the
docs:path pattern to includex_docs/**/*.mdkeeps commit tagging aligned with where documentation now lives.e2e/homepage.spec.ts (1)
5-5: Homepage title assertion correctly updated to match new brandingThe e2e test assertion now matches the
Devflowtitle set inapp/layout.tsxline 9. The regex pattern/Devflow/is appropriate and keeps the test aligned with the metadata.app/layout.tsx (1)
1-39: LGTM!The layout changes are well-structured:
- Import aliases correctly use
@/as per coding guidelines- Font variables are properly integrated with the CSS variable system
- Body styling simplified appropriately by removing the wrapper div, giving pages control over their own structure
- Metadata updated to reflect the new branding
app/globals.css (2)
88-91: LGTM!The font variable definitions are well-structured with appropriate fallback stacks. The semantic naming (
--font-display,--font-sans-serif,--font-mono) clearly communicates intent and integrates properly with the Tailwind v4@theme inlinesystem.
144-147: LGTM!Setting the base
htmlfont-family tovar(--font-sans-serif)correctly applies the Inter font stack as the default, with the display font (Space Grotesk) reserved for headings via thefont-displayutility class.x_docs/own/globals-compare.md (1)
1-983: Comprehensive and well-structured theming documentation.This comparison document provides excellent educational value, clearly explaining the benefits of the modern CSS variable approach over the legacy utility-class-based theming. The British English spellings (e.g., "centralisation", "optimisation", "customisation") are correct per the project's coding guidelines.
| --- | ||
| description: Post-merge cleanup: switch to main, pull, delete merged branch, prune | ||
| --- | ||
|
|
||
| ## Context | ||
|
|
||
| - Current branch: !`git branch --show-current` | ||
| - All local branches: !`git branch` | ||
| - Remote branches: !`git branch -r` | ||
|
|
||
| ## Task | ||
|
|
||
| Michelle has merged her PR and wants to clean up. Please: | ||
|
|
||
| 1. Switch to main branch | ||
| 2. Pull latest changes | ||
| 3. Delete the previous branch (the one shown above that is not main) | ||
| 4. Prune stale remote-tracking references: `git fetch --prune` | ||
| 5. Check both Git and GitHub to ensure clean status | ||
| 6. Create narrow summary table with emojies to show everything is clean | ||
|
|
||
| If already on main with no other branches, just confirm everything is clean. |
There was a problem hiding this comment.
Fix minor spelling in merge-cleanup instructions
Step 6 uses “emojies”, which should be “emojis”. Everything else reads clearly.
-6. Create narrow summary table with emojies to show everything is clean
+6. Create narrow summary table with emojis to show everything is clean📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| --- | |
| description: Post-merge cleanup: switch to main, pull, delete merged branch, prune | |
| --- | |
| ## Context | |
| - Current branch: !`git branch --show-current` | |
| - All local branches: !`git branch` | |
| - Remote branches: !`git branch -r` | |
| ## Task | |
| Michelle has merged her PR and wants to clean up. Please: | |
| 1. Switch to main branch | |
| 2. Pull latest changes | |
| 3. Delete the previous branch (the one shown above that is not main) | |
| 4. Prune stale remote-tracking references: `git fetch --prune` | |
| 5. Check both Git and GitHub to ensure clean status | |
| 6. Create narrow summary table with emojies to show everything is clean | |
| If already on main with no other branches, just confirm everything is clean. | |
| --- | |
| description: Post-merge cleanup: switch to main, pull, delete merged branch, prune | |
| --- | |
| ## Context | |
| - Current branch: !`git branch --show-current` | |
| - All local branches: !`git branch` | |
| - Remote branches: !`git branch -r` | |
| ## Task | |
| Michelle has merged her PR and wants to clean up. Please: | |
| 1. Switch to main branch | |
| 2. Pull latest changes | |
| 3. Delete the previous branch (the one shown above that is not main) | |
| 4. Prune stale remote-tracking references: `git fetch --prune` | |
| 5. Check both Git and GitHub to ensure clean status | |
| 6. Create narrow summary table with emojis to show everything is clean | |
| If already on main with no other branches, just confirm everything is clean. |
🧰 Tools
🪛 LanguageTool
[formatting] ~7-~7: These punctuation marks differ from each other. Use only one if you are ending a sentence.
Context: ... prune --- ## Context - Current branch: !git branch --show-current - All local ...
(DOUBLE_PUNCTUATION_PREMIUM)
[formatting] ~8-~8: These punctuation marks differ from each other. Use only one if you are ending a sentence.
Context: ...nch --show-current - All local branches: !git branch - Remote branches: !git br...
(DOUBLE_PUNCTUATION_PREMIUM)
[formatting] ~9-~9: These punctuation marks differ from each other. Use only one if you are ending a sentence.
Context: ...ranches: !git branch - Remote branches: !git branch -r ## Task Michelle has m...
(DOUBLE_PUNCTUATION_PREMIUM)
🤖 Prompt for AI Agents
In .claude/commands/merge-cleanup.md around lines 1 to 22, the word "emojies" is
misspelled; change it to "emojis" in step 6 and keep the rest of the
instructions unchanged so the step reads "Create narrow summary table with
emojis to show everything is clean."
| @import "tailwindcss"; | ||
|
|
||
| body { | ||
| font-family: "Inter", sans-serif; | ||
| } | ||
|
|
||
| :root { | ||
| --radius: 8px; | ||
| } | ||
|
|
||
| @layer utilities { | ||
| .background-light850_dark100 { | ||
| @apply bg-light-850 dark:bg-dark-100; | ||
| } | ||
|
|
||
| .background-light900_dark200 { | ||
| @apply bg-light-900 dark:bg-dark-200; | ||
| } | ||
|
|
||
| .background-light900_dark300 { | ||
| @apply bg-light-900 dark:bg-dark-300; | ||
| } | ||
|
|
||
| .background-light800_darkgradient { | ||
| @apply bg-light-800 dark:dark-gradient; | ||
| } | ||
|
|
||
| .background-light800_dark400 { | ||
| @apply bg-light-800 dark:bg-dark-400 !important; | ||
| } | ||
|
|
||
| .background-light700_dark400 { | ||
| @apply bg-light-700 dark:bg-dark-400; | ||
| } | ||
|
|
||
| .background-light700_dark300 { | ||
| @apply bg-light-700 dark:bg-dark-300; | ||
| } | ||
|
|
||
| .background-light800_dark400 { | ||
| @apply bg-light-800 dark:bg-dark-400; | ||
| } | ||
|
|
||
| .background-light800_dark300 { | ||
| @apply bg-light-800 dark:bg-dark-300 !important; | ||
| } | ||
|
|
||
| .background-light800_dark200 { | ||
| @apply bg-light-800 dark:bg-dark-200; | ||
| } | ||
|
|
||
| .background-dark400_light900 { | ||
| @apply dark:bg-dark-400 bg-light-900 !important; | ||
| } | ||
|
|
||
| .text-dark100_light900 { | ||
| @apply text-dark-100 dark:text-light-900 !important; | ||
| } | ||
|
|
||
| .text-dark200_light900 { | ||
| @apply text-dark-200 dark:text-light-900; | ||
| } | ||
|
|
||
| .text-dark200_light800 { | ||
| @apply text-dark-200 dark:text-light-800 !important; | ||
| } | ||
|
|
||
| .text-dark300_light700 { | ||
| @apply text-dark-300 dark:text-light-700; | ||
| } | ||
|
|
||
| .text-dark400_light700 { | ||
| @apply text-dark-400 dark:text-light-700; | ||
| } | ||
|
|
||
| .text-dark500_light700 { | ||
| @apply text-dark-500 dark:text-light-700 !important; | ||
| } | ||
|
|
||
| .text-dark500_light500 { | ||
| @apply text-dark-500 dark:text-light-500; | ||
| } | ||
|
|
||
| .text-dark500_light400 { | ||
| @apply text-dark-500 dark:text-light-400; | ||
| } | ||
|
|
||
| .text-dark300_light900 { | ||
| @apply text-dark-300 dark:text-light-900 !important; | ||
| } | ||
|
|
||
| .text-dark400_light800 { | ||
| @apply text-dark-400 dark:text-light-800; | ||
| } | ||
|
|
||
| .text-light400_light500 { | ||
| @apply text-light-400 dark:text-light-500 !important; | ||
| } | ||
|
|
||
| .text-dark400_light500 { | ||
| @apply text-dark-400 dark:text-light-500; | ||
| } | ||
|
|
||
| .text-dark400_light900 { | ||
| @apply text-dark-400 dark:text-light-900 !important; | ||
| } | ||
|
|
||
| .text-light400_light500 { | ||
| @apply text-light-400 dark:text-light-500 !important; | ||
| } | ||
|
|
||
| .light-border { | ||
| @apply border-light-800 dark:border-dark-300; | ||
| } | ||
|
|
||
| .light-border-2 { | ||
| @apply border-light-700 dark:border-dark-400 !important; | ||
| } | ||
|
|
||
| .h1-bold { | ||
| @apply text-[30px] font-bold leading-[42px] tracking-tighter; | ||
| } | ||
|
|
||
| .h2-bold { | ||
| @apply text-[24px] font-bold leading-[31.2px]; | ||
| } | ||
|
|
||
| .h2-semibold { | ||
| @apply text-[24px] font-semibold leading-[31.2px]; | ||
| } | ||
|
|
||
| .h3-bold { | ||
| @apply text-[20px] font-bold leading-[26px]; | ||
| } | ||
|
|
||
| .h3-semibold { | ||
| @apply text-[20px] font-semibold leading-[24.8px]; | ||
| } | ||
|
|
||
| .base-medium { | ||
| @apply text-[18px] font-medium leading-[25.2px]; | ||
| } | ||
|
|
||
| .base-semibold { | ||
| @apply text-[18px] font-semibold leading-[25.2px]; | ||
| } | ||
|
|
||
| .base-bold { | ||
| @apply text-[18px] font-bold leading-[140%]; | ||
| } | ||
|
|
||
| .paragraph-regular { | ||
| @apply text-[16px] font-normal leading-[22.4px]; | ||
| } | ||
|
|
||
| .paragraph-medium { | ||
| @apply text-[16px] font-medium leading-[22.4px]; | ||
| } | ||
|
|
||
| .paragraph-semibold { | ||
| @apply text-[16px] font-semibold leading-[20.8px]; | ||
| } | ||
|
|
||
| .body-regular { | ||
| @apply text-[14px] font-normal leading-[19.6px]; | ||
| } | ||
|
|
||
| .body-medium { | ||
| @apply text-[14px] font-medium leading-[18.2px]; | ||
| } | ||
|
|
||
| .body-semibold { | ||
| @apply text-[14px] font-semibold leading-[18.2px]; | ||
| } | ||
|
|
||
| .body-bold { | ||
| @apply text-[14px] font-bold leading-[18.2px]; | ||
| } | ||
|
|
||
| .small-regular { | ||
| @apply text-[12px] font-normal leading-[15.6px]; | ||
| } | ||
|
|
||
| .small-medium { | ||
| @apply text-[12px] font-medium leading-[15.6px]; | ||
| } | ||
|
|
||
| .small-semibold { | ||
| @apply text-[12px] font-semibold leading-[15.6px]; | ||
| } | ||
|
|
||
| .subtle-medium { | ||
| @apply text-[10px] font-medium leading-[13px] !important; | ||
| } | ||
|
|
||
| .subtle-regular { | ||
| @apply text-[10px] font-normal leading-[13px]; | ||
| } | ||
|
|
||
| .placeholder { | ||
| @apply placeholder:text-light-400 dark:placeholder:text-light-500; | ||
| } | ||
|
|
||
| .invert-colors { | ||
| @apply invert dark:invert-0; | ||
| } | ||
|
|
||
| .shadow-light100_dark100 { | ||
| @apply shadow-light-100 dark:shadow-dark-100; | ||
| } | ||
|
|
||
| .shadow-light100_darknone { | ||
| @apply shadow-light-100 dark:shadow-none; | ||
| } | ||
|
|
||
| .primary-gradient { | ||
| background: linear-gradient(129deg, #ff7000 0%, #e2995f 100%); | ||
| } | ||
|
|
||
| .dark-gradient { | ||
| background: linear-gradient( | ||
| 232deg, | ||
| rgba(23, 28, 35, 0.41) 0%, | ||
| rgba(19, 22, 28, 0.7) 100% | ||
| ); | ||
| } | ||
|
|
||
| .light-gradient { | ||
| background: linear-gradient( | ||
| 132deg, | ||
| rgba(247, 249, 255, 0.5) 0%, | ||
| rgba(229, 237, 255, 0.25) 100% | ||
| ); | ||
| } | ||
|
|
||
| .primary-text-gradient { | ||
| background: linear-gradient(129deg, #ff7000 0%, #e2995f 100%); | ||
| background-clip: text; | ||
| -webkit-background-clip: text; | ||
| -webkit-text-fill-color: transparent; | ||
| } | ||
|
|
||
| .flex-center { | ||
| @apply flex justify-center items-center; | ||
| } | ||
|
|
||
| .flex-between { | ||
| @apply flex justify-between items-center; | ||
| } | ||
|
|
||
| .flex-start { | ||
| @apply flex justify-start items-center; | ||
| } | ||
|
|
||
| .card-wrapper { | ||
| @apply bg-light-900 dark:dark-gradient shadow-light-100 dark:shadow-dark-100; | ||
| } | ||
|
|
||
| .btn { | ||
| @apply bg-light-800 dark:bg-dark-300 !important; | ||
| } | ||
|
|
||
| .btn-secondary { | ||
| @apply bg-light-800 dark:bg-dark-400 !important; | ||
| } | ||
|
|
||
| .btn-tertiary { | ||
| @apply bg-light-700 dark:bg-dark-300 !important; | ||
| } | ||
|
|
||
| .no-focus { | ||
| @apply focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 !important; | ||
| } | ||
|
|
||
| .markdown { | ||
| @apply max-w-full prose dark:prose-p:text-light-700 dark:prose-ol:text-light-700 dark:prose-ul:text-light-500 dark:prose-strong:text-white dark:prose-headings:text-white prose-headings:text-dark-400 prose-h1:text-dark-300 prose-h2:text-dark-300 prose-p:text-dark-500 prose-ul:text-dark-500 prose-ol:text-dark-500; | ||
| } | ||
|
|
||
| .markdown-editor { | ||
| @apply prose max-w-full prose-p:m-0 dark:prose-headings:text-white prose-headings:text-dark-400 prose-p:text-dark-500 dark:prose-p:text-light-700 prose-ul:text-dark-500 dark:prose-ul:text-light-700 prose-ol:text-dark-500 dark:prose-ol:text-light-700 dark:prose-strong:text-white prose-blockquote:text-dark-500 dark:prose-blockquote:text-light-700; | ||
| } | ||
|
|
||
| .tab { | ||
| @apply min-h-full dark:bg-dark-400 bg-light-800 text-light-500 dark:data-[state=active]:bg-dark-300 data-[state=active]:bg-primary-100 data-[state=active]:text-primary-500 !important; | ||
| } | ||
|
|
||
| .dark-gradient { | ||
| background: linear-gradient( | ||
| 232deg, | ||
| rgba(23, 28, 35, 0.41) 0%, | ||
| rgba(19, 22, 28, 0.7) 100% | ||
| ); | ||
| } | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Deduplicate overlapping utility classes to reduce confusion
Even though this is a legacy comparison stylesheet, a few utilities are defined more than once:
.background-light800_dark400appears twice (Lines 28–30 and 40–42) with differing!importantusage, so the latter silently overrides the former..text-light400_light500is defined twice identically (Lines 96–98 and 108–110)..dark-gradientis defined twice with the same gradient (Lines 220–226 and 287–293).
Consider keeping only a single, intentional definition for each to make it clearer which behaviour is expected, and to avoid surprises if this file is ever referenced directly.
🤖 Prompt for AI Agents
In app/globals-old.css (lines 1–294), there are duplicate utility definitions
that should be deduplicated: remove the first .background-light800_dark400 block
and keep the single canonical definition that includes the intended specificity
(retain the version with !important if you want stronger override), remove one
of the identical .text-light400_light500 blocks so only one remains, and remove
the duplicated .dark-gradient block so there’s a single source-of-truth; ensure
comments or a brief note remain if one variant was intentionally preferred.
| const Home = () => ( | ||
| <> | ||
| <h1 className="h1-bold">Welcome to the world of Next.js</h1> | ||
| </> | ||
| ); | ||
|
|
||
| export default function Home() { | ||
| return ( | ||
| <main className="flex flex-col gap-12"> | ||
| <header className="flex w-full items-center justify-between"> | ||
| <Image | ||
| className="dark:invert" | ||
| src="/next.svg" | ||
| alt="Next.js logo" | ||
| width={100} | ||
| height={20} | ||
| priority | ||
| /> | ||
| <ThemeToggle /> | ||
| </header> | ||
|
|
||
| <article className="flex flex-col gap-6"> | ||
| <h1 className="leading-10 tracking-tight text-foreground"> | ||
| Choose a UI Library | ||
| </h1> | ||
|
|
||
| <p className="text-lg leading-8 text-muted-foreground"> | ||
| This template still needs a UI component library. Choose one like{" "} | ||
| <a | ||
| href="https://ui.shadcn.com/docs/installation/next" | ||
| className="font-medium text-foreground underline" | ||
| > | ||
| shadcn/ui | ||
| </a>{" "} | ||
| or{" "} | ||
| <a | ||
| href="https://tailwindcss.com/plus" | ||
| className="font-medium text-foreground underline" | ||
| > | ||
| Tailwind Plus | ||
| </a> | ||
| . The theme in <code>globals.css</code> uses shadcn's semantic | ||
| colour naming convention. Your choice affects how to proceed. | ||
| </p> | ||
|
|
||
| <h2 className="mt-4 text-foreground">shadcn/ui</h2> | ||
| <p className="text-lg leading-8 text-muted-foreground"> | ||
| You're ready to go. The colour variables in{" "} | ||
| <code>globals.css</code> already match shadcn's naming ( | ||
| <code>--background</code>, <code>--foreground</code>,{" "} | ||
| <code>--primary</code>, <code>--muted</code>, etc.), so installed | ||
| components inherit your theme automatically. To customise colours, | ||
| change the values in <code>:root</code> and <code>.dark</code> | ||
| —all components update instantly. | ||
| </p> | ||
|
|
||
| <h2 className="mt-4 text-foreground">Tailwind Plus</h2> | ||
| <p className="text-lg leading-8 text-muted-foreground"> | ||
| Tailwind Plus includes UI Kit (Catalyst) and UI Blocks. The UI Kit | ||
| typically goes into <code>components/ui</code>, whilst blocks go into{" "} | ||
| <code>page.tsx</code> or <code>components/sections/</code>. Both use | ||
| Tailwind's default palette (<code>zinc</code>, <code>gray</code>,{" "} | ||
| <code>indigo</code>, etc.) rather than semantic names. | ||
| </p> | ||
| <p className="text-lg leading-8 text-muted-foreground"> | ||
| To theme them, either find-replace palette classes with semantic ones | ||
| (<code>bg-zinc-900</code> → <code>bg-background</code> | ||
| ), or override the palette in <code>@theme</code> | ||
| —for example, <code>--color-zinc-900: oklch(...)</code>. Note that | ||
| Blocks are often light-mode only. | ||
| </p> | ||
|
|
||
| <p className="text-lg leading-8 text-muted-foreground"> | ||
| With either library, colours remain centralised. The{" "} | ||
| <code>@theme</code> override method requires no code changes; | ||
| find-replace gives full control over naming but requires editing | ||
| files. | ||
| </p> | ||
|
|
||
| <h3 className="mt-4 text-foreground">Advanced: Palette Remapping</h3> | ||
| <p className="text-lg leading-8 text-muted-foreground"> | ||
| Instead of directly overriding <code>--color-zinc-900</code>, you can | ||
| define your brand palette first, then remap Tailwind's colours to | ||
| it: | ||
| </p> | ||
| <pre> | ||
| <code>{`@theme { | ||
| --color-brand-600: oklch(0.51 0.24 280); | ||
| } | ||
| :root { | ||
| --color-indigo-600: var(--color-brand-600); | ||
| --color-blue-600: var(--color-brand-600); /* both now use your brand */ | ||
| }`}</code> | ||
| </pre> | ||
| <p className="text-lg leading-8 text-muted-foreground"> | ||
| Benefits: define colours once with meaningful names, remap multiple | ||
| Tailwind palettes to the same brand colour, clearer separation between | ||
| your palette and Tailwind's naming. | ||
| </p> | ||
|
|
||
| <div className="mt-8 flex flex-col gap-4 sm:flex-row"> | ||
| <Button | ||
| href="https://vercel.com/new" | ||
| icon={ | ||
| <Image | ||
| className="dark:invert" | ||
| src="/vercel.svg" | ||
| alt="Vercel logomark" | ||
| width={16} | ||
| height={16} | ||
| /> | ||
| } | ||
| > | ||
| Deploy Now | ||
| </Button> | ||
| <Button variant="secondary" href="https://nextjs.org/docs"> | ||
| Documentation | ||
| </Button> | ||
| </div> | ||
| </article> | ||
| </main> | ||
| ); | ||
| } | ||
| export default Home; |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Minimal home page is fine; fragment is optional
The simplified Home component is clear and matches the new typography classes. You could drop the React fragment and return the <h1> directly, but that is purely optional.
🤖 Prompt for AI Agents
In app/page.tsx around lines 1 to 7, the top-level React fragment is unnecessary
for a single element; simplify the Home component by returning the <h1> directly
(remove the <>...</> wrapper) while keeping the component definition and export
the same.
|
|
||
| - `--radius` is defined in `:root` and mapped via `@theme inline` to generate `rounded-sm`, `rounded-md`, `rounded-lg`, `rounded-xl` utilities | ||
| - Fonts are defined as CSS variables (`--font-display`, `--font-serif`, `--font-mono`) that integrate with Next.js font optimisation | ||
|
|
There was a problem hiding this comment.
Minor documentation inconsistency: --font-serif should be --font-sans-serif.
The document references --font-serif, but app/globals.css defines --font-sans-serif. This should be corrected for accuracy.
-- Fonts are defined as CSS variables (`--font-display`, `--font-serif`, `--font-mono`) that integrate with Next.js font optimisation
+- Fonts are defined as CSS variables (`--font-display`, `--font-sans-serif`, `--font-mono`) that integrate with Next.js font optimisation🧰 Tools
🪛 LanguageTool
[style] ~58-~58: Would you like to use the Oxford spelling “optimization”? The spelling ‘optimisation’ is also correct.
Context: ...mono`) that integrate with Next.js font optimisation --- ### 2. Background Theme Utilities...
(OXFORD_SPELLING_Z_NOT_S)
🤖 Prompt for AI Agents
In x_docs/own/globals-compare.md around lines 56 to 59, the docs mention
`--font-serif` but the actual CSS variable in app/globals.css is
`--font-sans-serif`; update the markdown to use `--font-sans-serif` (and any
related mentions) so the document matches the CSS, and run a quick search in the
file for any remaining `--font-serif` references to replace them consistently.
1 participant
Summary
Test plan
🤖 Generated with Claude Code